<template>
  <div class='container'>
     <div class="content">
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-row style="padding:20px 0"> <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px;"
              type="success"
              icon="el-icon-edit"
              @click="AddQuestion"
            >新增试题</el-button>
    </el-row>
        <el-row :gutter="7">
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select v-model="form.subjectID" placeholder="请选择" @change="Hsubchange">
                <el-option  v-for="item in subjects" :label="item.subjectName" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="catalogID">
              <el-select v-model="form.catalogID" placeholder="请选择">
                <el-option  v-for="item in directlists" :label="item.directoryName" :key="item.id" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
             <el-form-item label="标签" prop="tags">
              <el-input v-model="form.tags"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字"  prop="keyword">
              <el-input v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="7">
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select v-model="form.questionType" placeholder="请选择">
                <el-option :label="item.label" v-for="item in questionType" :key="item.value" :value="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="form.difficulty" placeholder="请选择">
                <el-option :label="item.label" :value="item.label" v-for="item in difficulty" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" >
            <el-form-item label="方向" prop="direction">
              <el-select v-model="form.direction" placeholder="请选择">
                <el-option :label="item" :value="item" v-for="item in direction" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select v-model="form.creatorID" placeholder="请选择">
                <el-option :label="item.username" :value="item.username" v-for="item in userlists" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="7">
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
            <el-col :span="4">
              <el-form-item label="城市" prop="province">
                <el-select v-model="form.province" placeholder="请选择" @change="handleProvince">
                <el-option :label="item" :value="item" v-for="item in citySelect.province" :key="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" >
              <el-select v-model="form.city" placeholder="请选择">
                <el-option :label="item" :value="item" v-for='item in  citySelect.cityDate' :key="item"></el-option>
              </el-select>
          </el-col>
          <el-col :span="6" >
            <el-form-item style="text-align:right">
                <el-button @click="resetForm('form')">清除</el-button>
                <el-button type="primary"  @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- Tabs -->
    <el-radio-group v-model="form.chkState" @change="handleSearch ">
      <el-radio-button :label="null">全部</el-radio-button>
      <el-radio-button :label="0">待审核</el-radio-button>
      <el-radio-button :label="1">已审核</el-radio-button>
      <el-radio-button :label="2">已拒绝</el-radio-button>
    </el-radio-group>
    <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 列表 -->
          <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border >
          <el-table-column align="center" label="试题编号">
            <template slot-scope="scope">
              <span>{{scope.row.number}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{scope.row.subject}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录">
            <template slot-scope="scope">
              <span>{{scope.row.catalog}}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型">
             <template slot-scope="scope">
              <span v-if="scope.row.questionType==1">单选</span>
              <span v-else-if="scope.row.questionType==2">多选</span>
              <span v-else-if="scope.row.questionType==3">简答</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干" prop="question">
            <template slot-scope="scope">
              <P v-html="scope.row.question"></P>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="难度" >
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty==1">简单</span>
              <span v-else-if="scope.row.difficulty==2">一般</span>
              <span v-else-if="scope.row.difficulty==3">困难</span>
          </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.creator}}</span>
            </template>
          </el-table-column>
           <el-table-column align="center" label="审核状态">
            <template slot-scope="scope">
             <span v-if="scope.row.chkState==0">待审核</span>
              <span v-else-if="scope.row.chkState==1">通过</span>
              <span v-else-if="scope.row.chkState==2">拒绝</span>
            </template>
          </el-table-column>
           <el-table-column align="center" label="审核意见">
            <template slot-scope="scope">
              <span>{{scope.row.chkRemarks}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核人">
            <template slot-scope="scope">
              <span>{{scope.row.chkUser}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布状态">
            <template slot-scope="scope">
               <span>{{scope.row.chkState===1?'已发布':'待发布'}}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            fixed="right"
            width="270"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="hPreview(scope.row.id)">预览</el-button>

               <el-button type="text" :disabled="scope.row.chkState===0?false:true" @click='handleCheck(scope.row.id)'>审核</el-button>
              <el-button type="text" :disabled="scope.row.publishState===1?true:false" @click="AddQuestion(scope.row.id)">修改</el-button>
              <el-button
                type="text" @click="handelPublish(scope.row)"
                :loading="listLoading"
              >
                <span v-if="scope.row.publishState==0">上架</span>
                <span v-else-if="scope.row.publishState==1">下架</span>
              </el-button>
              <el-button type="text" :disabled="scope.row.publishState===1?true:false" @click="deleteCheck(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
           <PreChoice ref="Qpreview"  :quesPreview="formData"></PreChoice>
           <QuesCheck ref="chek"  :chkform="formChk" v-on:detailQues="getChoiceList"></QuesCheck>
        </el-table>
        <el-pagination
        style="margin-right:10px"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(form.page)"
              :total="Number(total)"
              :page-size="Number(form.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout=" prev, pager, next, sizes, jumper"
            ></el-pagination>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects'
import { list as userList } from '@/api/base/users'
import { list as dirtList } from '@/api/hmmm/directorys'
import { choice, remove, choicePublish, detail } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys.js'
import PreChoice from '@/module-hmmm/components/questions-preview-luan.vue'
import QuesCheck from '@/module-hmmm/components/questions-check.vue'
// import { log } from 'util'
export default {
  components: {
    PreChoice,
    QuesCheck
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 10,
        catalogID: ''
      },
      formData: {
      // id:'',
        questionType: '',
        difficulty: '',
        tags: '',
        subjectName: '',
        directoryName: '',
        direction: '',
        question: '',
        options: '',
        videoURL: '',
        answer: '',
        remarks: ''
      },
      formChk: {
        // id:'',
        chkState: '',
        chkRemarks: ''
      },
      userlists: [],
      subjects: [],
      directlists: [],
      tableKey: 0,
      total: null,
      dataList: [],
      listLoading: false,
      alertText: '',
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  computed: {
    // 题型
    questionType () {
      return questionType
    },
    // 难度
    difficulty () {
      return difficulty
    },
    // 方向
    direction () {
      return direction
    }
  },
  methods: {
    initialDate () {
      // 读取数据
      this.getChoiceList()
      this.getSubjectsList()
      this.getUserList()
      // this.getDirecList ()
    },
    // 获取精选题库列表
    async getChoiceList (params) {
      this.listLoading = true
      const { data: res } = await choice(this.form)
      console.log(res)
      this.dataList = res.items
      this.total = res.counts
      this.alertText = `数据一共 ${this.total} 条`
      this.listLoading = false
    },
    // 获取学科列表
    async getSubjectsList () {
      const { data: res } = await list()
      this.subjects = res.items
    },
    // 获取用户列表
    async getUserList () {
      const { data: res } = await userList()
      // console.log("............", res)
      this.userlists = res.list
    },
    // 联动功能
    async Hsubchange (val) {
      const { data: res } = await dirtList({ subjectID: val })
      this.directlists = res.items
      this.form.catalogID = ''
      // this.directlists=res.items
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.form.city = this.citySelect.cityDate[0]
    },
    // 搜索功能
    handleSearch () {
      this.form.page = 1
      this.getChoiceList(this.form)
    },
    // 清除功能
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.getChoiceList()
    },
    handleCurrentChange (curPage) {
      this.form.page = curPage
      this.getChoiceList()
    },
    handleSizeChange (val) {
      this.form.pagesize = val
      if (this.form.page === 1) {
        this.getChoiceList(this.form)
      }
    },
    // 获取详细列表
    async getdetailList (objID) {
      this.formData.id = objID
      this.formChk.id = objID
      const { data: res } = await detail({ id: objID })
      this.formData = res
      this.formChk = res
      console.log('99999999', res)
    },
    // 试题审核
    handleCheck (id) {
      this.$refs.chek.dialogFormV()
      this.getdetailList(id)
    },
    // 预览题目
    hPreview (id) {
      this.$refs.Qpreview.dialogFormV()
      this.getdetailList(id)
    },
    // 删除功能
    deleteCheck (Strid) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: Strid })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.dataList.splice(Strid, 1)
              this.getChoiceList(this.form)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 上下架
    async handelPublish (row) {
      this.listLoading = true
      var data = {
        id: row.id,
        publishState: row.publishState === 1 ? 0 : 1
      }
      await choicePublish(data)
      this.$message.success('修改状态成功')
      row.publishState = row.publishState === 1 ? 0 : 1
      this.getChoiceList(this.form)
      this.listLoading = false
    },
    // 修改，新增
    AddQuestion (val) {
      if (val) {
        this.$router.push({
          path: 'new',
          query: {
            id: val
          }
        })
      } else {
        this.$router.push(
          {
            name: 'questions-new ',
            path: 'new'
          })
      }
    }
  },
  created () {
    // var _this = this
    this.initialDate()
    this.getCityData()
  }
  // computed () {
  //   return

  // },
  // watch : {

  // },
  // computed () {
  //   return this.form.subjectID
  // // },
  // mounted: function () {},
  // updated: function () {}

}
</script>

<style scoped lang='scss'>
.container{
  background: #fff;
  margin: 10px
}

</style>
